import React, { Component } from 'react'
import { getSwiper, getGroups, getNews } from '../../api/home'
import styles from './index.module.scss'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'

// import { Link } from 'react-router-dom'

// 以模块的方式，加载本地图片
import image1 from '../../assets/images/nav-1.png'
import image2 from '../../assets/images/nav-2.png'
import image3 from '../../assets/images/nav-3.png'
import image4 from '../../assets/images/nav-4.png'

// 引入SearchBar子组件
import SearchBar from '../../components/SearchBar'

import { getCurrentCity } from '../../utils/city'

export default class Home extends Component {
  constructor () {
    super()

    this.state = {
      imgHeight: 212, // 轮播图中图片的高度
      swiper: null, // 轮播图数据
      groups: null, // 租房小组数据
      news: null, // 最新资讯数据
      cityName: '深圳' // 定位的城市名
    }
  }

  // 定义的实例属性
  navs = [
    { icon: image1, text: '整租', path: '/layout/houselist' },
    { icon: image2, text: '合租', path: '/layout/houselist' },
    { icon: image3, text: '地图找房', path: '/map' },
    { icon: image4, text: '去出租', path: '/rent/add' }
  ]

  async componentDidMount () {
    const { label } = await getCurrentCity()
    this.setState({
      cityName: label
    })

    // 获取轮播图数据
    this.getSwiperData()
    // 获取租房小组的数据
    this.getGroupsData()
    // 获取最新资讯的数据
    this.getNewsData()
  }

  getSwiperData = async () => {
    const res = await getSwiper()

    this.setState({
      swiper: res.data.body
    })
  }

  getGroupsData = async () => {
    const res = await getGroups()

    this.setState({
      groups: res.data.body
    })
  }

  getNewsData = async () => {
    const res = await getNews()

    this.setState({
      news: res.data.body
    })
  }

  renderSwiper = () => {
    return (
      <Carousel autoplay infinite>
        {this.state.swiper.map(item => {
          return (
            <a
              key={item.id}
              href='http://www.alipay.com'
              style={{
                display: 'inline-block',
                width: '100%',
                height: this.state.imgHeight
              }}
            >
              <img
                src={`${process.env.REACT_APP_BASEURL}${item.imgSrc}`}
                alt=''
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'))
                  this.setState({ imgHeight: 'auto' })
                }}
              />
            </a>
          )
        })}
      </Carousel>
    )
  }

  renderNav = () => {
    return (
      <Flex className={styles.nav}>
        {this.navs.map(item => {
          return (
            <Flex.Item
              onClick={() => this.props.history.push(item.path)}
              key={item.text}
            >
              {/* <Link to={item.path}> */}
              <img src={item.icon} />
              <p>{item.text}</p>
              {/* </Link> */}
            </Flex.Item>
          )
        })}
      </Flex>
    )
  }

  renderGroups = () => {
    return (
      <div className={styles.groups}>
        <Flex>
          <Flex.Item style={{ fontSize: 18, fontWeight: 'bold' }}>
            租房小组
          </Flex.Item>
          <Flex.Item align='end'>更多</Flex.Item>
        </Flex>
        <Grid
          data={this.state.groups}
          columnNum={2}
          hasLine={false}
          square={false}
          renderItem={dataItem => (
            <div className={styles.navItem}>
              <div className={styles.left}>
                <p>{dataItem.title}</p>
                <p>{dataItem.desc}</p>
              </div>
              <div className={styles.right}>
                <img
                  src={`${process.env.REACT_APP_BASEURL}${dataItem.imgSrc}`}
                />
              </div>
            </div>
          )}
        />
      </div>
    )
  }

  renderNews = () => {
    return (
      <div className={styles.news}>
        <h3 className={styles.groupTitle}>最新资讯</h3>
        <WingBlank size='md'>
          {this.state.news.map(item => {
            return (
              <div key={item.id} className={styles.newsItem}>
                <div className={styles.imgWrap}>
                  <img src={`${process.env.REACT_APP_BASEURL}${item.imgSrc}`} />
                </div>
                <Flex
                  className={styles.content}
                  direction='column'
                  justify='between'
                >
                  <h3 className={styles.title}>{item.title}</h3>
                  <Flex className={styles.info} justify='between'>
                    <span>{item.from}</span>
                    <span>{item.date}</span>
                  </Flex>
                </Flex>
              </div>
            )
          })}
        </WingBlank>
      </div>
    )
  }

  render () {
    const { swiper, groups, news, cityName } = this.state
    return (
      <div className={styles.root}>
        {/* 搜索条 */}
        <SearchBar cityName={cityName} />
        {/* 渲染轮播图 */}
        {swiper && this.renderSwiper()}
        {/* 渲染Nav */}
        {this.renderNav()}
        {/* 渲染租房小组 */}
        {groups && this.renderGroups()}
        {/* 渲染最新资讯 */}
        {news && this.renderNews()}
      </div>
    )
  }
}
